<script setup lang="ts">
type Position = "center" | "start" | "end" | "nil";

const props = defineProps<{ position?: Position }>();
const position = props.position ?? "center";

let cls = "global-footer-container p-absolute  items-center flex";

const classMap = {
	center: " justify-center ",
	end: " justify-end ",
	start: " flex-start",
	nil: " ",
} as Record<Position, string>;

cls += classMap[position];
</script>

<template>
	<section :class="cls">
		<slot />
	</section>
</template>

<style lang="less" scoped>
.global-footer-container {
	z-index: 2;
	box-sizing: border-box;
	// bottom: 2px;
	bottom: 0px;
	left: 0px;
	padding-top: 15px;
	padding-bottom: 13px;
	background: #ffffff;
	box-shadow: 0px -4px 6px rgba(0, 0, 0, 0.1);
	// width: calc(100% - 40px);
	width: calc(100% - 0px);
	// margin: 0 -24px;
	// margin: -4px -24px;
}
</style>
